<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- #region 内容分区元素 -->
    <H1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题5</h4>
    <!-- #endregion -->
    <!-- #region  文本内容元素->
    <div>
        div无格式容器
    </div>
    <p>
        p段落1
        p段落2
        p段落3
    </p>
    <pre>
        pre预先格式段落1
        pre预先格式段落2
        pre预先格式段落13
    </pre>
    <p>无序列列表</p>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
    <p>有序列列表</p>
    <ol>
        <li>有序列表项1</li>
        <li>有序列表项2</li>
        <li>有序列表项3</li>
    </ol>
    <p>定义列表</p>
    <dl>
        <dt>定义列表1</dt>
        <dd>定义列表1的描述</dd>
        <dt>定义列表2</dt>
        <dt>定义列表3</dt>
    </dl>
    <hr>
    <blockquote>
        长引用内容 
        长引用内容 
        长引用内容
    </blockquote>
    <!-- #endregion  -->
    <!-- #region 内联文本元素 -->
    <span>无格式行级元素</span>
    <br>换行<br>
    <b>视觉加粗</b>
    <br>
    <strong>强调加粗</strong>
    <br>
    <i>视觉倾斜</i>
    <br>
    <em>强调倾斜</em>
    <br>
    <a href="#">链接当前页</a>
    <br>
    <!-- target="_blank" 保留当前页，新建一个页面 -->
    <a href="https://www.bilibili.com/" target="_blank">连接外部页:bilibili</a>
    <a href="./computer.html">返回首页</a>
    <!-- #endregion -->
    <!-- #region 图片元素 -->
    <br>
    <img src="C:\Users\86187\Desktop\HTML\img\yclogo1(1).png" alt="图片描述">
    <a href="https://www.bilibili.com"><img src="C:\Users\86187\Desktop\HTML\img\yclogo1(1).png" alt="图片描述"></a>
    <!-- #endregion -->
    <!-- #region 内嵌内容元素 -->
    <!-- 在前台尽量不使用iframe标签，除非无关紧要的内容，
        搜索引擎并不友好，后台可以使用，作用嵌入其他网页的内容 -->
        <iframe src="https://www.w3school.com.cn" frameborder="2" width="800" height="600"></iframe>
    <!-- #endregion -->
</body>
</html>